> .posts
    margin: 1rem

    .post
        display: block

    .card
        @include radius(all, 6px)
        @include transition(box-shadow .1s ease-out)
        background: var(--bg-card)
        margin: 1rem 0
        padding: 1rem
        position: relative
        box-shadow: var(--shdw)
        overflow: hidden

        .title
            @include font(22px, normal, --text-p0)

        .description
            @include font(15px, --text-p2)
            margin-top: .5rem

        .meta
            @include font(13px, --text-p3)
            margin-top: .5rem

        .link-bg
            --sz: 2rem
            position: absolute
            top: calc(0rem - var(--sz))
            right: calc(0rem - var(--sz))
            width: 0px
            height: 0px
            border: var(--sz) solid transparent
            border-bottom-color: var(--bg-hov)
            transform: rotate(45deg)
        .link
            position: absolute
            top: .35rem
            right: .35rem
            img.icon
                width: .8rem
                height: .8rem
                filter: invert(20%)

        &:hover
            box-shadow: var(--shdw-hov)

.projects
    @extend .posts

    .project
        display: block
    
    .card
        display: flex
        align-items: center

        .preview
            margin: 1rem
            height: 5rem
            img
                width: 12rem
                height: 5rem

        .excerpt
            margin: 1rem